<template>
  <div>
    <v-row>
      <v-col cols="7">
        <v-pagination
          v-model="current"
          :length="size"
          :total-visible="7"
          circle
          @input="initBlogList()"
        />
      </v-col>
      <v-col class="text-right" cols="1">
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-btn
              :loading="refreshLoading"
              :disabled="refreshLoading"
              color="teal darken-1"
              class="ma-2 white--text"
              fab
              outlined
              small
              @click="refreshList"
              v-on="on"
            >
              <v-icon dark>mdi-refresh</v-icon>
            </v-btn>
          </template>
          <span>刷新</span>
        </v-tooltip>

      </v-col>
      <v-col cols="4">
        <v-select
          v-model="selectOrder"
          :items="orders"
          item-text="name"
          menu-props="{ top: true, offsetY: true }"
          label="排序方式"
          hide-details
          @input="initBlogList()"
        />
      </v-col>
    </v-row>
    <v-row>
      <v-container
        v-if="blogList && blogList.length > 0"
        class="noPadding"
      >
        <v-skeleton-loader
          v-for="blog in blogList"
          :key="blog.id"
          class="ma-6"
          :loading="skeletonLoading"
          min-height="200"
          tile
          type="list-item,list-item-avatar-three-line"
        >
          <v-sheet
            width="100%"
            elevation="0"
            class="align-center mt-3"
          >
            <!--博客列表 单元卡 模块-->
            <v-hover
              v-slot:default="{ hover }"
              open-delay="0"
              close-delay="0"
            >
              <v-card
                max-width="100%"
                class="point-cursor mx-auto"
                :elevation="hover ? 12 : 0"
                @click="enterBlog(blog)"
              >
                <v-row>
                  <v-card-title class="title ml-3">
                    {{ blog.title }}
                  </v-card-title>
                </v-row>
                <v-row
                  class="py-4 pl-4"
                >
                  <v-col class="shrink">
                    <v-img
                      height="200"
                      width="200"
                      :src="blog.coverUrl"
                    />
                  </v-col>
                  <v-col>
                    <v-layout align-start="true" column>
                      <v-flex class="caption">
                        <v-btn text depressed x-small>作者:</v-btn>
                        <v-chip
                          class="ma-2"
                          color="indigo"
                          small
                          text-color="white"
                        >
                          <v-avatar left>
                            <v-icon>mdi-account-circle</v-icon>
                          </v-avatar>
                          {{ blog.author }}
                        </v-chip>
                        <v-divider vertical inset />
                        <v-btn text depressed x-small>发表时间:</v-btn>
                        <v-icon>mdi-history</v-icon>
                        {{ blog.createTime }}
                        <v-divider vertical inset />
                        <v-btn text depressed x-small>分类:</v-btn>
                        <v-icon> mdi-google-chrome</v-icon>
                        <v-btn x-small outlined color="success">
                          {{ blog.blogType }}
                        </v-btn>
                      </v-flex>
                      <v-flex class="caption">
                        <v-row>
                          <v-card
                            v-for="tag in blog.tags"
                            :key="tag.id"
                            elevation="0"
                          >
                            <v-card-text>
                              <v-chip outlined small :color="getRandomColor()">
                                {{ tag.name }}
                              </v-chip>
                            </v-card-text>
                          </v-card>
                        </v-row>
                      </v-flex>
                      <v-flex>
                        <v-card-text>
                          {{ blog.intro }}
                        </v-card-text>
                      </v-flex>
                    </v-layout>

                  </v-col>
                </v-row>
              </v-card>
            </v-hover>
          </v-sheet>
        </v-skeleton-loader>
      </v-container>
      <v-container
        v-else
        class="noPadding"
      >
        <v-row aligin-center>
          <v-img
            src="http://119.23.10.3:8018/group1/M00/00/01/rBIUS1-BctqAMtbiAAA-9FEkhMs54.jpeg"
            aspect-ratio="1"
            class="grey lighten-2"
            max-height="300"
          />
        </v-row>
      </v-container>
    </v-row>
  </div>
</template>

<script>
import { mixin } from '@/utils/mixin'

export default {
  name: 'BlogList',
  mixins: [mixin],
  inject: ['theme'],
  data: () => ({
    // 分页
    current: 1,
    pageSize: 8,
    size: 0,
    // 筛选
    orders: [
      { name: '最后修改日期', value: 'updateTime' },
      { name: '最后发表日期', value: 'createTime' },
      { name: '评论最多', value: 'commentNum' }
    ],
    tagColors: [// 标签颜色
      'green lighten-3', 'light-green darken-1', 'lime darken-3', 'orange lighten-4', 'blue-grey lighten-1', 'brown lighten-1',
      'deep-orange darken-4', 'black', 'light-blue accent-1', 'teal lighten-2', 'deep-purple lighten-1', 'purple lighten-4',
      'pink lighten-5', 'light-green lighten-1'],
    refreshLoading: false,
    skeletonLoading: true
  }),
  watch: {
    blogType: {
      handler(oldVal, newVal) {
        console.log('Type now:' + oldVal + '||Type before:' + newVal)
        this.initBlogList()
      }
    },
    blogTag: {
      handler(oldVal, newVal) {
        console.log('Tag now:' + oldVal + '||Tag before:' + newVal)
        this.initBlogList()
      }
    }
  },
  created() {
    this.initBlogList()
  },
  mounted() {

  },
  methods: {
    // 加载博客
    initBlogList() {
      // 打开骨架屏
      this.skeletonLoading = true
      const param = {
        current: this.current,
        pageSize: this.pageSize,
        order: this.selectOrder,
        blogType: this.blogType ? this.blogType : '',
        blogTag: this.blogTag ? this.blogTag : ''
      }
      // 刷新博客
      this.$store.dispatch('refreshBlogs', param)
        .then((res) => this.loadSuccess(res))
        .catch(err => this.loadFailed(err))
        .finally(() => {
          // console.log("博客列表已更新......")
        })
    },
    // 成功的回调处理
    loadSuccess(res) {
      const result = res.data
      if (res && res.code === 200) {
        this.size = Math.ceil(result.total / this.pageSize)
      }
      this.refreshLoading = false
      const that = this
      setTimeout(function() {
        that.skeletonLoading = false
      }, 200)
    },
    // 失败的回调处理
    loadFailed(err) {
      // console.log('加载博客列表失败', err);
      this.refreshLoading = false
      const that = this
      setTimeout(function() {
        that.skeletonLoading = false
      }, 200)
    },

    // 获取标签颜色
    getRandomColor() {
      return this.$lodash.sample(this.tagColors)
    },
    // 刷新
    refreshList() {
      // 刷新
      this.refreshLoading = true
      this.current = 1
      this.initBlogList()
    },
    /**
             * 进入博客
             * */
    enterBlog(blog) {
      this.$emit('enterBlogDetail', blog)
    }
  }
}
</script>

<style scoped>

</style>
